0
1.3K
VistasLa alerta está vacía cuando el valor está presente en la entrada [React.js]
Estoy tratando de alertar con el valor del cuadro de texto. En el siguiente código, alertará cualquiera que sea el valor en la entrada.
import { useState } from "react"; export default function App() { const [value, setValue] = useState(""); function handle() { alert(value); } return ( <div className="App"> <h1>Hello App</h1> <input type="text" onChange={(e) => { setValue(e.target.value); }} /> <button onClick={handle}>Hello</button> </div> ); } 
Pero si ya hay un valor de texto establecido desde el variablebe, no muestra el valor en el cuadro de alerta. Esta vacio. Como se puede ver en el siguiente código. Estoy configurando un const hola con una cadena y configurándolo como valor para la entrada. Pero no se muestra en la ventana emergente.
import { useState } from "react"; export default function App() { const [value, setValue] = useState(""); function handle() { alert(value); } return ( <div className="App"> <h1>Hello App</h1> <input type="text" onChange={(e) => { setValue(e.target.value); }} value={"hello"} /> <button onClick={handle}>Hello</button> </div> ); } 
1 Respuestas
Responde la pregunta0
La razón por la que la alerta no muestra el valor de estado "correcto" es porque en handle() el valor no ha cambiado "a tiempo".
Prueba esto
import { useState, useCallback } from "react"; export default function App() { const [value, setValue] = useState(""); const handle = useCallback(() => { alert(value); }, [value]); return ( <div className="App"> <h1>Hello App</h1> <input type="text" value={value} onChange={(e) => { setValue(e.target.value); }} /> <button onClick={handle}>Hello</button> </div> ); } ¿Por qué useCallback() ?
Según los documentos de React . Este enlace memoriza sus valores internos y solo los actualizará cuando cambie alguna de las dependencias.
El value dentro del alcance de la función handle() no se actualiza, al envolver la función handle dentro de un useCallback y adjuntar el estado del value como una dependencia, se asegura de que handle siempre actualice sus valores/variables de alcance interno, espero que ayude.